<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js">
		</script>
	</head>

	<body>
		<!-- 顶部 -->
		<div class="top">
			<div class="con">
				<div class="left">
					<img src="img/titleSanjiao.3f6c1afa.svg" alt="" class="jiantou" />
					<img src="img/pic1.png" alt="" class="text" />
					<img src="img/titleSanjiao.3f6c1afa.svg" alt="" class="jiantou jt1" />
					<div class="guang">
						<svg width="100%" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none">
							<defs>
								<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
									<stop offset="0%" style="stop-color:rgb(0,217,255);stop-opacity:0" />
									<stop offset="50%" style="stop-color:rgb(0,217,255);stop-opacity:1" />
									<stop offset="100%" style="stop-color:rgb(0,217,255);stop-opacity:0" />
								</linearGradient>
							</defs>
							<rect class="light" fill="url(#grad1)" />
						</svg>
					</div>
					<img src="img/bg2.png" class="zhe" alt="" />
				</div>
				<h2>墅智街区开门大吉</h2>
				<div class="left">
					<img src="img/titleSanjiao.3f6c1afa.svg" alt="" class="jiantou" />
					<img src="img/pic1.png" alt="" class="text" />
					<img src="img/titleSanjiao.3f6c1afa.svg" alt="" class="jiantou jt1" />
					<div class="guang">
						<svg width="100%" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none">
							<defs>
								<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
									<stop offset="0%" style="stop-color:rgb(0,217,255);stop-opacity:0" />
									<stop offset="50%" style="stop-color:rgb(0,217,255);stop-opacity:1" />
									<stop offset="100%" style="stop-color:rgb(0,217,255);stop-opacity:0" />
								</linearGradient>
							</defs>
							<rect class="light" fill="url(#grad1)" />
						</svg>
					</div>
					<img src="img/bg2.png" class="zhe" alt="" />
				</div>
			</div>
			<div class="date">
				<div id="dateTime"></div>
			</div>
		</div>
		<div class="main">
			<!-- 左侧 -->
			<div class="left">
				<!-- 分析类型 -->
				<div class="part" style="height:35%;">
					<div class="title">
						<img src="img/city.8abb70ee.svg" alt="" />
						<h2>分级类型</h2>
					</div>
					<div class="con">
						<ul>
							<li id="switchToPie1" class="now">一级单元</li>
							<li id="switchToPie2">二级单元</li>
						</ul>
						<div id="main"></div>
					</div>
				</div>
				<!-- 社区分布 -->
				<div class="part" style="height: 30%;">
					<div class="title">
						<img src="img/city.8abb70ee.svg" alt="" />
						<h2>社区分布</h2>
					</div>
					<div class="con">
						<ul>
							<li class="clickable now">广阳区</li>
							<li class="clickable">安次区</li>
							<li class="clickable">永清县</li>
							<li class="clickable">大城县</li>
						</ul>
						<div class="zu">
							<div id="main1"></div>
							<div id="main2"></div>
						</div>
					</div>
				</div>
				<!-- 月活跃度 -->
				<div class="part" style="height: 35%;">
					<div class="title">
						<img src="img/city.8abb70ee.svg" alt="" />
						<h2>月活跃度</h2>
					</div>
					<div class="con">
						<div id="main3"></div>
					</div>
				</div>
			</div>
			<!-- 中间部分 -->
			<div class="middle">
				<ul class="text">
					<li>今日自查检查项<span>6006</span></li>
					<li>今日督查检查项<span>6006</span></li>
					<li>累计自查检查项<span>6006</span></li>
					<li>累计督查检查项<span>6006</span></li>
				</ul>
				<div class="con1">
					<!-- 左侧数据 -->
					<div class="Top_Record">
						<div class="record_Top">
							<p>优礼榜 (5)月</p>
						</div>
						<div class="topRec_List">
							<dl>
								<dd>#</dd>
								<dd>名称</dd>
								<dd>积分</dd>
								<dd>网格</dd>
								<dd>社区</dd>
							</dl>
							<div class="maquee">
								<ul>
									<li>
										<div>1</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li class="dan">
										<div>2</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li>
										<div>3</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li class="dan">
										<div>4</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li>
										<div>5</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li class="dan">
										<div>6</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- 中间数据 -->
					<div class="mid">
						<div class="pa">
							<p>388</p>
							<p>今日督查</p>
							<div class="text1">
								较前日
								<p>↓↑-256</p>
							</div>
						</div>
						<div class="pa">
							<p>388</p>
							<p>今日督查</p>
							<div class="text1">
								较前日
								<p>↓↑-256</p>
							</div>
						</div>
					</div>
					<!-- 右侧数据 -->
					<div class="Top_Record">
						<div class="record_Top">
							<p>关注榜 (近三日未自查)</p>
						</div>
						<div class="topRec_List">
							<dl>
								<dd>#</dd>
								<dd>名称</dd>
								<dd>积分</dd>
								<dd>网格</dd>
								<dd>社区</dd>
							</dl>
							<div class="maquee">
								<ul>
									<li>
										<div>1</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li class="dan">
										<div>2</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li>
										<div>3</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li class="dan">
										<div>4</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li>
										<div>5</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
									<li class="dan">
										<div>6</div>
										<div>山东餐馆</div>
										<div>168</div>
										<div>第5网格</div>
										<div>大塘巷</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- 公告部分 -->
				<div class="marquee">
					<ul>
						<li><span>●</span>2024-05-24 10:35:57</span> <span>乐刻健身</span> <span>第4网格</span> <span>米市</span>
							<span>已自查</span>
						</li>
						<li><span>●</span>2024-05-24 10:33:29</span> <span>之江图文</span> <span>第4网格</span> <span>米市</span>
							<span>已督查</span>
						</li>
						<li><span>●</span>2024-05-24 10:28:22</span> <span>我爱我家</span> <span>第1网格</span> <span>米市</span>
							<span>已督查</span>
						</li>
						<li><span>●</span>2024-05-24 10:35:57</span> <span>乐刻健身</span> <span>第4网格</span> <span>米市</span>
							<span>已自查</span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 右侧 -->
			<div class="right">
				<!-- 问题事项 top5 -->
				<div class="part" style="height:35%;">
					<div class="title">
						<img src="img/city.8abb70ee.svg" alt="" />
						<h2>问题事项 top5</h2>
					</div>
					<div class="con">
						<div id="tab">
							<ul class="tab_menu">
								<li class="now">文明</li>
								<li>保序</li>
								<li>保洁</li>
								<li>治安</li>
								<li>食药</li>
								<li>消安</li>
							</ul>
							<div class="tab_box">
								<div>
									<ul>
										<li>
											<p>1场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>1场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>1场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>1场所已配备灭火器等基本消防器材并保整有效</p><span>839</span>
										</li>
										<li>
											<p>1场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
									</ul>
								</div>
								<div class="hide">
									<ul>
										<li>
											<p>2场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>2场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>2场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>2场所已配备灭火器等基本消防器材并保整有效</p><span>839</span>
										</li>
										<li>
											<p>2场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
									</ul>
								</div>
								<div class="hide">
									<ul>
										<li>
											<p>3场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>3场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>3场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>3场所已配备灭火器等基本消防器材并保整有效</p><span>839</span>
										</li>
										<li>
											<p>3场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
									</ul>
								</div>
								<div class="hide">
									<ul>
										<li>
											<p>4场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>4场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>4场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>4场所已配备灭火器等基本消防器材并保整有效</p><span>839</span>
										</li>
										<li>
											<p>4场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
									</ul>
								</div>
								<div class="hide">
									<ul>
										<li>
											<p>5场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>5场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>5场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>5场所已配备灭火器等基本消防器材并保整有效</p><span>839</span>
										</li>
										<li>
											<p>5场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
									</ul>
								</div>
								<div class="hide">
									<ul>
										<li>
											<p>6场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>6场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>6场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
										<li>
											<p>6场所已配备灭火器等基本消防器材并保整有效</p><span>839</span>
										</li>
										<li>
											<p>6场所已配备灭火器等基本消防器材并保持完整有效</p><span>839</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
		
					</div>
				</div>
				<!-- 问题分布 top5-->
				<div class="part" style="height: 30%;">
					<div class="title">
						<img src="img/city.8abb70ee.svg" alt="" />
						<h2>问题分布 top5</h2>
					</div>
					<div class="con">
						<ul>
							<li class="clickable5 now">文明</li>
							<li class="clickable5">保序</li>
							<li class="clickable5">保洁</li>
							<li class="clickable5">治安</li>
							<li class="clickable5">食药</li>
							<li class="clickable5">消安</li>
						</ul>
						<div class="zu">
							<div id="main5"></div>
							<div id="main6"></div>
						</div>
					</div>
				</div>
				<!-- 问题整改进度 -->
				<div class="part" style="height: 35%;">
					<div class="title">
						<img src="img/city.8abb70ee.svg" alt="" />
						<h2>问题整改进度</h2>
					</div>
					<div class="con">
						<table class="part1">
							<tr>
								<th></th>
								<th>问题数</th>
								<th>整改中</th>
								<th>逾期未整改</th>
								<th>已整改</th>
							</tr>
							<tr>
								<td>
									<img src="img/zicha.svg" alt="">
									自查
								</td>
								<td>
									<p>20</p>
								</td>
								<td>
									<p>10</p>
								</td>
								<td>
									<p>0</p>
								</td>
								<td>
									<p>10</p>
								</td>
							</tr>
							<tr>
								<td>
									<img src="img/ducha.svg" alt="">
									自查
								</td>
								<td>
									<p>20</p>
								</td>
								<td>
									<p>10</p>
								</td>
								<td>
									<p>0</p>
								</td>
								<td>
									<p>10</p>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- 中间左上角 -->
		<div class="youhua">
			<h2>优礼指数<span>(5月)</span></h2>
			<p class="text"><span>5</span><span>2</span></p>
			<p>较上月↓↑-3</p>
		
		</div>
		<!-- 中间右上角菜单 -->
		
		<div class="sp_nav"> 一级单位 </div>
		
		<div class="sjj_nav">
		  <ul>
		   
		    <li> 商业大街
		      <ul>
				<li class="t">二级单位</li>
		        <li>诊所</li>
		        <li>服装</li>
		        <li>视频</li>
		        <li>文娱</li>
		        <li>足疗</li>
		      </ul>
		    </li>
		    <li>医院</li>
		    <li>银行</li>
		    <li>公测</li>
		    <li>小区</li>
		    <li>公园</li>
		  </ul>
		</div>
		
		<!-- 优礼指数雷达图 -->
		<div class="leida" style="display: none;">
			<h2>优礼指数</h2>
			<div id="main7"></div>
			<img src="img/close.svg" alt="" class="close" />
		</div>
		
		<img src="img/bgBtom.cce029ad.svg" class="botpic" alt="" />
		<!-- 地图 -->
		<div id="container"></div>
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
		<script src="js/marquee.js"></script>
		<script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script>
		<script			src="https://webapi.amap.com/maps?v=2.0&key=d2b8f27007657abe5ee153f475c6d70a&plugin=AMap.Scale,AMap.ToolBar">		</script>

		<script>
			// 优礼指数
			
			var dom = document.getElementById('main7');
			var myChart7 = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false
			});
			var app = {};
			var option7;
			option7 = {
				radar: {
					indicator: [{
							name: '公众参评数',
							max: 10000
						},
						{
							name: '日活跃度',
							max: 10000
						},
						{
							name: '督查整改数',
							max: 10000
						},
						{
							name: '自查整改数',
							max: 10000
						},
						{
							name: '预期整改数',
							max: 10000
						}
					],
					name: {
						textStyle: {
							color: '#fff',
							fontSize: 14
						}
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#408fd1'
						}
					},
					splitLine: {
						lineStyle: {
							color: '#408fd1',
						}
					},
			
				},
				tooltip: {
					trigger: 'item'
				},
				series: [{
					name: '优礼指数',
					type: 'radar',
					data: [{
						value: [4200, 3000, 2000, 3000, 5000],
						name: '优礼指数'
					}],
					symbol: 'circle', // 数据点的形状
					symbolSize: 8, // 数据点的大小
					itemStyle: {
						color: '#67c2f3' // 数据点的颜色
					},
			
					areaStyle: {
						normal: {
							color: '#5896d6' // 设置区域颜色为半透明的绿色
						}
					},
					lineStyle: {
						normal: {
							color: '#67c2f3' // 设置边线颜色为蓝色
						}
					}
				}],
				label: {
					show: true,
					color: '#fff',
					fontSize: 14
				},
			};
			myChart7.setOption(option7);
			
			$(".close").click(function() {
				$(".leida").hide(500)
			})
			
			
			$(".youhua").click(function() {
				$(".leida").show(500)
				myChart7.resize({
					width: 1300,
					height: 700
				});
			})
			
			
			// 右侧
			// 问题分布 top5
			var myChart5 = echarts.init(document.getElementById('main5'));
			var data5 = [];
			var list5 = [{
					area: '文明',
					zhi: [{
							value: 1,
							name: '足疗'
						},
						{
							value: 2,
							name: '五金'
						},
						{
							value: 3,
							name: '药店'
						},
						{
							value: 4,
							name: '网吧'
						},
						{
							value: 5,
							name: '文娱'
						},
					]
				},
				{
					area: '保序',
					zhi: [{
							value: 50,
							name: '足疗'
						},
						{
							value: 20,
							name: '五金'
						},
						{
							value: 5,
							name: '药店'
						},
						{
							value: 15,
							name: '网吧'
						},
						{
							value: 12,
							name: '文娱'
						},
					]
				},
				{
					area: '保洁',
					zhi: [{
							value: 10,
							name: '足疗'
						},
						{
							value: 20,
							name: '五金'
						},
						{
							value: 5,
							name: '药店'
						},
						{
							value: 50,
							name: '网吧'
						},
						{
							value: 12,
							name: '文娱'
						},
					]
				}, {
					area: '治安',
					zhi: [{
							value: 15,
							name: '足疗'
						},
						{
							value: 12,
							name: '药店'
						},
						{
							value: 5,
							name: '五金'
						},
						{
							value: 50,
							name: '文娱'
						},
						{
							value: 12,
							name: '网吧'
						},
					]
				}, {
					area: '食药',
					zhi: [{
							value: 15,
							name: '足疗'
						},
						{
							value: 12,
							name: '药店'
						},
						{
							value: 5,
							name: '网吧'
						},
						{
							value: 50,
							name: '五金'
						},
						{
							value: 12,
							name: '文娱'
						},
					]
				}, {
					area: '消安',
					zhi: [{
							value: 15,
							name: '足疗'
						},
						{
							value: 12,
							name: '药店'
						},
						{
							value: 5,
							name: '五金'
						},
						{
							value: 50,
							name: '文娱'
						},
						{
							value: 12,
							name: '网吧'
						},
					]
				},
			]
			for (var i = 0; i < list5[0].zhi.length; i++) {
				data5.push(list5[0].zhi[i])
				console.log(list5[0].zhi[i])
			}
			$('.clickable5').click(function() {
				var index = $(this).index();
				data5 = []
				$(this).addClass('now').siblings().removeClass('now');
				for (var i = 0; i < list5[index].zhi.length; i++) {
					data5.push(list5[index].zhi[i])
				}
				data6 = []
				for (var i = 0; i < list6[index].zhi.length; i++) {
					data6.push(list6[index].zhi[i])
				}
				reloadChart5(data5, data6);
			
			});
			let option5 = {
			
				grid: {
					top: 0,
					right: 20,
					bottom: 00,
					containLabel: true
				},
				xAxis: [{
					show: false,
				}],
				yAxis: [{
					data: data5.map(item => item.name),
					type: 'category',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						color: "#a9a9aa",
						fontSize: 12
					}
				}],
				series: [
			
					{
						// 真实数据
						data: data5.map(item => item.value),
						name: "顶部圆片 （柱形图顶部）",
						type: 'pictorialBar',
						symbolSize: [5, 13],
						symbolOffset: [0, 0],
						z: 99,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#3be3ce'
									},
									{
										offset: 1,
										color: '#4da5cc'
									}
								]
							)
						},
						symbolPosition: "end"
					},
					{
						name: '真实数据柱形图',
						type: "pictorialBar",
						symbolSize: [5, 13],
						symbolOffset: [-2, 0],
						z: 99,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#34c3b2'
									},
									{
										offset: 1,
										color: '#4dc4e2'
									}
								]
							)
						},
						data: data5.map(item => item.value),
					},
					{
						name: '底部圆片（柱形图底部）',
						type: "bar",
						sort: 'asc',
						itemStyle: {
							borderRadius: [0, 3, 3, 0],
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#2ca0b4'
									},
									{
										offset: 1,
										color: '#4dbbf5'
									}
								]
							)
						},
						z: 13,
						silent: true,
						barWidth: 13,
						barGap: "-100%",
						showBackground: true,
						backgroundStyle: {
							color: "rgba(255,255,255, 0)"
						},
						label: {
							show: true,
							position: 'right',
							color: '#a9a9aa'
						},
						data: data5.map(item => item.value),
					},
			
				]
			}
			myChart5.setOption(option5);
			
			var myChart6 = echarts.init(document.getElementById('main6'));
			var data6 = [];
			var list6 = [{
					area: '文明',
					zhi: [{
							value: 1,
							name: '第1网格'
						},
						{
							value: 2,
							name: '第2网格'
						},
						{
							value: 3,
							name: '第3网格'
						},
						{
							value: 4,
							name: '第4网格'
						},
						{
							value: 5,
							name: '第5网格'
						},
					]
				},
				{
					area: '保序',
					zhi: [{
							value: 6,
							name: '第1网格'
						},
						{
							value: 7,
							name: '第2网格'
						},
						{
							value: 7,
							name: '第3网格'
						},
						{
							value: 8,
							name: '第4网格'
						},
						{
							value: 12,
							name: '第5网格'
						},
					]
				},
				{
					area: '保洁',
					zhi: [{
							value: 10,
							name: '第1网格'
						},
						{
							value: 20,
							name: '第2网格'
						},
						{
							value: 40,
							name: '第3网格'
						},
						{
							value: 30,
							name: '第4网格'
						},
						{
							value: 10,
							name: '第5网格'
						},
					]
				},
				{
					area: '治安',
					zhi: [{
							value: 6,
							name: '第1网格'
						},
						{
							value: 7,
							name: '第2网格'
						},
						{
							value: 7,
							name: '第3网格'
						},
						{
							value: 8,
							name: '第4网格'
						},
						{
							value: 12,
							name: '第5网格'
						},
					]
				},
				{
					area: '食药',
					zhi: [{
							value: 6,
							name: '第1网格'
						},
						{
							value: 7,
							name: '第2网格'
						},
						{
							value: 7,
							name: '第3网格'
						},
						{
							value: 8,
							name: '第4网格'
						},
						{
							value: 12,
							name: '第5网格'
						},
					]
				},
				{
					area: '消安',
					zhi: [{
							value: 6,
							name: '第1网格'
						},
						{
							value: 7,
							name: '第2网格'
						},
						{
							value: 7,
							name: '第3网格'
						},
						{
							value: 8,
							name: '第4网格'
						},
						{
							value: 112,
							name: '第5网格'
						},
					]
				},
			]
			for (var i = 0; i < list6[0].zhi.length; i++) {
				data6.push(list6[0].zhi[i])
			}
			
			let option621 = {
			
				grid: {
					top: 0,
					right: 20,
					bottom: 00,
					containLabel: true
				},
				xAxis: [{
					show: false,
				}],
				yAxis: [{
					data: data6.map(item => item.name),
					type: 'category',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						color: "#a9a9aa",
						fontSize: 12
					}
				}],
				series: [{
						name: '底部圆片（柱形图底部）',
						type: "bar",
						sort: 'asc',
						itemStyle: {
							borderRadius: [0, 3, 3, 0],
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#4d4caa'
									},
									{
										offset: 1,
										color: '#7b6af2'
									}
								]
							)
						},
						z: 16,
						silent: true,
						barWidth: 16,
						barGap: "-100%",
						showBackground: true,
						backgroundStyle: {
							color: "rgba(255,255,255, 0)"
						},
						label: {
							show: true,
							position: 'right',
							color: '#a9a9aa'
						},
						data: data6.map(item => item.value),
					},
					{
						// 真实数据
						data: data6.map(item => item.value),
						name: "顶部圆片 （柱形图顶部）",
						type: 'pictorialBar',
						symbolSize: [5, 16],
						symbolOffset: [0, 0],
						z: 99,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#9bd1fa'
									},
									{
										offset: 1,
										color: '#a9a7f6'
									}
								]
							)
						},
						symbolPosition: "end"
					},
					{
						name: '真实数据柱形图',
						type: "pictorialBar",
						symbolSize: [5, 16],
						symbolOffset: [-2, 0],
						z: 99,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#5c83a7'
									},
									{
										offset: 1,
										color: '#7b7bd0'
									}
								]
							)
						},
						data: data6.map(item => item.value),
					},
			
			
				]
			}
			myChart6.setOption(option621);
			
			function reloadChart5(newData, newData2) {
				console.log(123456)
				console.log(newData)
				console.log(newData2)
				option5.series[0].data = newData;
				option5.series[1].data = newData;
				option5.series[2].data = newData;
				option621.series[0].data = newData2;
				option621.series[1].data = newData2;
				option621.series[2].data = newData2;
				myChart5.setOption(option5);
				myChart6.setOption(option621);
			}
			// 问题事项
			$(document).ready(function() {
				var $tab_li = $('#tab ul li');
				$tab_li.click(function() {
					$(this).addClass('now').siblings().removeClass('now');
					var index = $tab_li.index(this);
					$('div.tab_box > div').eq(index).show().siblings().hide();
				});
			});
			$(document).ready(function() {
				$('.marquee').kxbdMarquee({
					direction: 'left',
					eventA: 'mouseenter',
					eventB: 'mouseleave'
				});
			});
			// 中间滚动部分
			function autoScroll(obj) {
				$(obj).find("ul").animate({
					marginTop: "-32px"
				}, 500, function() {
					$(this).css({
						marginTop: "0px"
					}).find("li:first").appendTo(this);
				})
			}
			$(function() {
				setInterval('autoScroll(".maquee")', 3000);
				setInterval('autoScroll(".apple")', 2000);
			})
			// 月活跃度
			var myChart3 = echarts.init(document.getElementById('main3'));
			var option3 = {
				tooltip: {
					trigger: 'item'
				},
				grid: {
					top: 30,
					left: 10,
					right: 15,
					bottom: 10,
					containLabel: true
				},
				xAxis: {
					type: 'category',
					axisLine: {
						lineStyle: {
							color: '#263762'
						}
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#263762',
							type: 'solid'
						}
					},
					axisLabel: {
						color: '#fff'
					},
					data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07']
				},
				yAxis: {
					type: 'value',
					axisLine: {
						lineStyle: {
							color: '#263762'
						}
					},
					axisLabel: {
						color: '#fff'
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#263762',
							type: 'solid'
						}
					},
				},
				series: [{
					data: [820, 92, 901, 934, 1290, 1330, 1320],
					type: 'line',
					smooth: false,
					name: "月度活跃度",
					lineStyle: {
						width: 5,
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#2ab5ad'
						}, {
							offset: 1,
							color: '#30b6f9'
						}])
					},
					symbolSize: 10,
					label: {
						show: true,
						color: '#fff',
					},
				}]
			};
			myChart3.setOption(option3);
			
			// 社区分布 
			// 蓝色
			var myChart1 = echarts.init(document.getElementById('main1'));
			var data = [];
			var list = [{
					area: '广阳区',
					zhi: [{
							value: 1,
							name: '宾馆饭店'
						},
						{
							value: 2,
							name: '小区'
						},
						{
							value: 3,
							name: '银行'
						},
						{
							value: 4,
							name: '综合写字楼'
						},
						{
							value: 5,
							name: '公厕'
						},
					]
				},
				{
					area: '安次区',
					zhi: [{
							value: 50,
							name: '宾馆饭店'
						},
						{
							value: 20,
							name: '小区'
						},
						{
							value: 5,
							name: '银行'
						},
						{
							value: 15,
							name: '综合写字楼'
						},
						{
							value: 12,
							name: '公厕'
						},
					]
				},
				{
					area: '永清县',
					zhi: [{
							value: 10,
							name: '宾馆饭店'
						},
						{
							value: 20,
							name: '小区'
						},
						{
							value: 5,
							name: '银行'
						},
						{
							value: 50,
							name: '综合写字楼'
						},
						{
							value: 12,
							name: '公厕'
						},
					]
				}, {
					area: '大城县',
					zhi: [{
							value: 15,
							name: '宾馆饭店'
						},
						{
							value: 12,
							name: '小区'
						},
						{
							value: 5,
							name: '银行'
						},
						{
							value: 50,
							name: '综合写字楼'
						},
						{
							value: 12,
							name: '公厕'
						},
					]
				},
			]
			for (var i = 0; i < list[0].zhi.length; i++) {
				data.push(list[0].zhi[i])
				console.log(list[0].zhi[i])
			}
			$('.clickable').click(function() {
				var index = $(this).index();
				data = []
				$(this).addClass('now').siblings().removeClass('now');
				for (var i = 0; i < list[index].zhi.length; i++) {
					data.push(list[index].zhi[i])
				}
				data2 = []
				for (var i = 0; i < list2[index].zhi.length; i++) {
					data2.push(list2[index].zhi[i])
				}
				reloadChart(data, data2);
			
			});
			let option = {
			
				grid: {
					top: 0,
					right: 20,
					bottom: 00,
					containLabel: true
				},
				xAxis: [{
					show: false,
				}],
				yAxis: [{
					data: data.map(item => item.name),
					type: 'category',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						color: "#a9a9aa",
						fontSize: 12
					}
				}],
				series: [
			
					{
						// 真实数据
						data: data.map(item => item.value),
						name: "顶部圆片 （柱形图顶部）",
						type: 'pictorialBar',
						symbolSize: [5, 13],
						symbolOffset: [0, 0],
						z: 99,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#3be3ce'
									},
									{
										offset: 1,
										color: '#4da5cc'
									}
								]
							)
						},
						symbolPosition: "end"
					},
					{
						name: '真实数据柱形图',
						type: "pictorialBar",
						symbolSize: [5, 13],
						symbolOffset: [-2, 0],
						z: 99,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#34c3b2'
									},
									{
										offset: 1,
										color: '#4dc4e2'
									}
								]
							)
						},
						data: data.map(item => item.value),
					},
					{
						name: '底部圆片（柱形图底部）',
						type: "bar",
						sort: 'asc',
						itemStyle: {
							borderRadius: [0, 3, 3, 0],
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#2ca0b4'
									},
									{
										offset: 1,
										color: '#4dbbf5'
									}
								]
							)
						},
						z: 13,
						silent: true,
						barWidth: 13,
						barGap: "-100%",
						showBackground: true,
						backgroundStyle: {
							color: "rgba(255,255,255, 0)"
						},
						label: {
							show: true,
							position: 'right',
							color: '#a9a9aa'
						},
						data: data.map(item => item.value),
					},
			
				]
			}
			myChart1.setOption(option);
			
			var myChart2 = echarts.init(document.getElementById('main2'));
			var data2 = [];
			var list2 = [{
					area: '广阳区',
					zhi: [{
							value: 1,
							name: '宾馆饭店'
						},
						{
							value: 2,
							name: '小区'
						},
						{
							value: 3,
							name: '银行'
						},
						{
							value: 4,
							name: '综合写字楼'
						},
						{
							value: 5,
							name: '公厕'
						},
					]
				},
				{
					area: '安次区',
					zhi: [{
							value: 6,
							name: '宾馆饭店'
						},
						{
							value: 7,
							name: '小区'
						},
						{
							value: 7,
							name: '银行'
						},
						{
							value: 8,
							name: '综合写字楼'
						},
						{
							value: 12,
							name: '公厕'
						},
					]
				},
				{
					area: '永清县',
					zhi: [{
							value: 10,
							name: '宾馆饭店'
						},
						{
							value: 20,
							name: '小区'
						},
						{
							value: 40,
							name: '银行'
						},
						{
							value: 30,
							name: '综合写字楼'
						},
						{
							value: 10,
							name: '公厕'
						},
					]
				},
			]
			for (var i = 0; i < list2[0].zhi.length; i++) {
				data2.push(list[0].zhi[i])
				console.log(list2[0].zhi[i])
			}
			
			let option21 = {
			
				grid: {
					top: 0,
					right: 20,
					bottom: 00,
					containLabel: true
				},
				xAxis: [{
					show: false,
				}],
				yAxis: [{
					data: data2.map(item => item.name),
					type: 'category',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						color: "#a9a9aa",
						fontSize: 12
					}
				}],
				series: [{
						name: '底部圆片（柱形图底部）',
						type: "bar",
						sort: 'asc',
						itemStyle: {
							borderRadius: [0, 3, 3, 0],
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#4d4caa'
									},
									{
										offset: 1,
										color: '#7b6af2'
									}
								]
							)
						},
						z: 16,
						silent: true,
						barWidth: 16,
						barGap: "-100%",
						showBackground: true,
						backgroundStyle: {
							color: "rgba(255,255,255, 0)"
						},
						label: {
							show: true,
							position: 'right',
							color: '#a9a9aa'
						},
						data: data2.map(item => item.value),
					},
					{
						// 真实数据
						data: data2.map(item => item.value),
						name: "顶部圆片 （柱形图顶部）",
						type: 'pictorialBar',
						symbolSize: [5, 16],
						symbolOffset: [0, 0],
						z: 99,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#9bd1fa'
									},
									{
										offset: 1,
										color: '#a9a7f6'
									}
								]
							)
						},
						symbolPosition: "end"
					},
					{
						name: '真实数据柱形图',
						type: "pictorialBar",
						symbolSize: [5, 16],
						symbolOffset: [-2, 0],
						z: 99,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[{
										offset: 0,
										color: '#5c83a7'
									},
									{
										offset: 1,
										color: '#7b7bd0'
									}
								]
							)
						},
						data: data2.map(item => item.value),
					},
			
			
				]
			}
			myChart2.setOption(option21);
			
			
			function reloadChart(newData, newData2) {
				console.log(123456)
				option.series[0].data = newData;
				option.series[1].data = newData;
				option.series[2].data = newData;
				option21.series[0].data = newData2;
				option21.series[1].data = newData2;
				option21.series[2].data = newData2;
				myChart1.setOption(option);
				myChart2.setOption(option21);
			}
			
			
			
			
			// 分级类型
			var myChart = echarts.init(document.getElementById('main'));
			var option1 = {
				tooltip: {
					trigger: 'item'
				},
				series: [{
					name: '商铺类型',
					type: 'pie',
					radius: ['30%', '70%'],
					itemStyle: {
						borderRadius: 5
					},
					label: {
						normal: {
							textStyle: {
								color: '#fff' // 设置字体颜色为红色
							}
						}
					},
					data: [{
							value: 1048,
							name: '小区'
						},
						{
							value: 735,
							name: '街道'
						},
						{
							value: 580,
							name: '小学'
						},
						{
							value: 484,
							name: '中学'
						},
						{
							value: 300,
							name: '大学'
						}
					]
				}]
			};
			var option2 = {
				tooltip: {
					trigger: 'item'
				},
				series: [{
					name: '商铺类型',
					type: 'pie',
					radius: ['30%', '70%'],
					data: [{
							value: 1048,
							name: '小区'
						},
						{
							value: 735,
							name: '街道'
						},
						{
							value: 50,
							name: '小学'
						},
						{
							value: 484,
							name: '中学'
						},
						{
							value: 300,
							name: '大学'
						}
					]
				}]
			};
			
			myChart.setOption(option1);
			
			function switchChart(option) {
				myChart.setOption(option);
			}
			document.getElementById('switchToPie1').onclick = function() {
				switchChart(option1);
				$("#switchToPie1").addClass('now')
				$("#switchToPie2").removeClass('now')
			};
			
			// 假设有一个按钮用来切换到饼图2
			document.getElementById('switchToPie2').onclick = function() {
				switchChart(option2);
				$("#switchToPie2").addClass('now')
				$("#switchToPie1").removeClass('now')
			};
			
			const div = document.getElementById('dateTime')
			// 获取系统时间的函数
			function getNowDate() {
				const date = new Date()
				let h = date.getHours()
				let m = date.getMinutes()
				let s = date.getSeconds()
				h = h < 10 ? '0' + h : h
				m = m < 10 ? '0' + m : m
				s = s < 10 ? '0' + s : s
				return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日 ${h}:${m}:${s}` //getMonth() 获取月份取值从0开始，故实际月份要加1
			}
			div.innerHTML = getNowDate()
			setInterval(function() {
				div.innerHTML = getNowDate()
			}, 1000)
			
			// 地图
			var adCode = 131023;
			var center = [116.526242,39.155195]

			function getURLParameters() {
				var params = {};
				var parser = document.createElement('a');
				parser.href = window.location.href;
				var query = parser.search.substring(1);
				var vars = query.split('&');
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split('=');
					params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
				}
				return params;
			}
			window.onload = function() {
				var params = getURLParameters();
				console.log(params)
				console.log('param1:', params.id);


				// console.log('param2:', params.center);
				adCode = params.id
				// center = []
				// center.push(params.position1, params.position2)
				// console.log(center)
				var depth = 2;

				var map = new AMap.Map("container", {
					zoom: 10,
					resizeEnable: false,
					center: center,

					mapStyle: "amap://styles/darkblue",
				});

				// 创建省份图层
				var disProvince;

				function initPro(code, dep) {
					dep = typeof dep == 'undefined' ? 2 : dep;
					adCode = code;
					depth = dep;

					disProvince && disProvince.setMap(null);

					disProvince = new AMap.DistrictLayer.Province({
						zIndex: 5,
						adcode: [code],
						depth: dep,
						styles: {
							'fill': function(properties) {

								var adcode = properties.adcode;
								return getColorByAdcode(adcode);
							},
							'province-stroke': 'cornflowerblue',
							'city-stroke': 'white', // 中国地级市边界
							'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
						}
					});

					disProvince.setMap(map);
				}

				// 颜色辅助方法
				var colors = {};
				var getColorByAdcode = function(adcode) {
					if (!colors[adcode]) {
						var gb = Math.random() * 155 + 50;
						colors[adcode] = 'rgba(' + gb + ',' + gb + ',255,0.6)';
					}

					return colors[adcode];
				};

				initPro(adCode, depth);
				// 点标记
				var markers = [{

						position: [116.588134, 39.322551],
						desc: '永定河中桥'
					},
					{

						position: [116.453552, 39.261305],
						desc: '西养马庄村'
					},
					{

						position: [116.556183, 39.22508],
						desc: '后裔镇'
					},
				];

				// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
				markers.forEach(function(marker) {
					var amapMarker = new AMap.Marker({
						map: map,
						icon: 'http://data.fbwechat.com/marker.png',
						position: [marker.position[0], marker.position[1]],
						offset: new AMap.Pixel(-13, -30),
						content: '<div class="custom-content-marker">' + '   <img src="img/address.png">' +
							'   <div class="close-btn" onclick="clearMarker()">' + marker.desc + '</div>' +
							'</div>',
					});
					amapMarker.on('click', (e) => {
						location.href = 'community.html'
					
					});
				});

				
			};
		</script>
	</body>

</html>